<template>
  <el-card class="home-order-progress">
    <p class="title">任务进度</p>
    <el-row v-if="orderFillRate && orderFillRate.length" class="progress-list">
      <el-col v-for="(item, i) in orderFillRate" :key="i" :span="8" class="progress-item">
        <div class="order-num" style="border-right: 1px solid #F4F4F4" @click="goTurn(item)">
          <div class="num">{{ item.value | bigDataFilter }}</div>
          <div class="name">{{ item.name }}</div>
        </div>
        <el-progress :percentage="item.rate || 0" :stroke-width="8" :width="70" :color="item.color" type="circle" class="circle-progress" />
        <div class="progress-type">{{ item.type | orderRateStatus }}</div>
      </el-col>
    </el-row>
    <EmptyPlaceholder v-else :empty-img="emptyIcon" image-size="120px" style="margin-top:40px;" text="暂无数据" text-color="#999" />
  </el-card>
</template>
<script>
import { orderRateStatus } from '@/filters/status';
import { bigDataFilter } from '@/filters/number';
import { hasRouteAuth } from '@/utils/permission';
import ElMessage from '@/utils/message';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import emptyIcon from '@/assets/home/emptyIcon.png';

export default {
  filters: { orderRateStatus, bigDataFilter },
  components: { EmptyPlaceholder },
  props: {
    orderFillRate: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      emptyIcon
    };
  },
  methods: {
    hasRouteAuth,
    goTurn(item) {
      if (!this.hasRouteAuth(item.auth)) {
        ElMessage.warning('您暂无该页面权限，请到用户管理-权限管理进行设置或联系管理员');
        return false;
      }
      switch (item.type) {
        case 'orderRate':
          this.$router.push({
            name: 'allOrder'
          });
          break;
        case 'projectRate':
          this.$router.push({
            name: 'projectList'
          });
          break;
        case 'verificationRate':
          this.$router.push({
            name: 'dayAccount'
          });
          break;
      }
    }
  }
};
</script>
<style lang="scss">
.home-order-progress {
  min-width: 314px;
  box-shadow: 2px 2px 8px 0px #DDE1EA;
  border-radius: 4px;
  height: 300px;
  margin-bottom: 12px;
  .el-card__body {
    padding: 16px 20px 20px 20px;
    .title {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      margin: 0;
    }
    .progress-list {
      .progress-item {
        text-align: center;
        padding: 24px 0 0 0;
        &:last-of-type {
          .order-num {
            border-right: none !important;
          }
        }
        &:nth-of-type(1) {
          .circle-progress {
            .el-progress__text {
              color: #FD8546;
            }
            .el-progress-circle {
              svg {
                path.el-progress-circle__track {
                  stroke: #FAF1ED;
                }
              }
            }
          }
        }
        &:nth-of-type(2) {
          .circle-progress {
            .el-progress__text {
              color: #406EFF;
            }
            .el-progress-circle {
              svg {
                path.el-progress-circle__track {
                  stroke: #EBEFFE;
                }
              }
            }
          }
        }
        &:nth-of-type(3) {
          .circle-progress {
            .el-progress__text {
              color: #31CC9C;
            }
            .el-progress-circle {
              svg {
                path.el-progress-circle__track {
                  stroke: #E6F8F2;
                }
              }
            }
          }
        }
        .order-num {
          margin-bottom: 24px;
          cursor: pointer;
          .num {
            font-size: 24px;
            font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi;
            font-weight: 500;
            color: #5F77C3;
            text-align: center;
            margin-bottom: 15px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .name {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            text-align: center;
          }
        }
        .circle-progress {
          .el-progress__text {
            font-size: 18px !important;
            font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi;
            font-weight: 500;
          }
        }
        .progress-type {
          margin-top: 20px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
        }
      }
    }
  }
}
</style>
